<template>
	<div id="Runing">
		<!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label>
				<el-input v-model="formInline.user" placeholder="搜索关键词"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form> -->
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>已完成</span>
			</div>
			<el-collapse v-for="(item,key,index) in tableData" :key="index">
				<el-collapse-item :title="key" name="1">
					<el-card class="box-card">
						<el-table :data="item" style="width: 100%">
							<el-table-column prop="Title" label="标题" fixed width="350">
								<template slot-scope="scope">
									<el-link :underline="false">{{scope.row.Title}}</el-link>
								</template>
							</el-table-column>
							<el-table-column prop="StarterName" label="发起人" width="150"></el-table-column>
							<el-table-column prop="ADT" label="发起部门" width="150"></el-table-column>
							<el-table-column prop="RDT" label="当前节点" width="150"></el-table-column>
							<el-table-column prop="NodeName" label="到达时间" width="150"></el-table-column>
							<el-table-column prop="NodeName" label="当前处理人" width="150"></el-table-column>
							<el-table-column label="操作" width="150">
								<template slot-scope="scope">
									<el-button @click="handleClick(scope.row)" type="text" size="small">轨迹</el-button>
									<el-button type="text" size="small">撤销</el-button>
									<el-button type="text" size="small">催办</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-collapse-item>
			</el-collapse>
		</el-card>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="pageSize"
			:page-size="10"
			layout="total, prev, pager, next"
			:total="total"
		></el-pagination>
	</div>
</template>

<script>
export default {
	name: "Runing",
	components: {
	},

	data() {
		return {
			title: "已完成",
			data: {},
			formInline: {
				user: "",
				region: ""
			},
			tableData: {},
			total: 0, // 总数
			pageSize: 1 // 当前页
		};
	},

	beforeCreate() {},

	created() {
		this.loadData();
	},

	methods: {
		// 获取数据
		loadData() {
			let handler = new this.HttpHandler("BP.WF.HttpHandler.WF");
			let data = handler.DoMethodReturnString("Runing_Init");
			console.log(data);
			this.data = JSON.parse(data);
			this.total = this.data.length;
			this.paging();
			// this.filterData(JSON.parse(data));
		},

		// 分页
		paging() {
			let start = (this.pageSize - 1) * 10;
			let end = this.pageSize * 10;
			let arr = this.data.slice(start, end);
			this.filterData(arr);
		},

		// 过滤数据
		filterData(data) {
			this.tableData = {};
			data.forEach(item => {
				this.tableData[item.FlowName] = [];
			});
			data.forEach(item => {
				this.tableData[item.FlowName].push(item);
			});
			console.log(this.tableData);
		},

		// 查询
		onSubmit() {},

		//
		handleSizeChange(val) {
			this.pageSize = val;
			this.paging();
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			this.pageSize = val;
			this.paging();
			console.log(`当前页: ${val}`);
		}
	},

	//监听
	computed: {},

	//监听后执行动作
	watch: {}
};
</script>

<style lang="less" scoped>
/deep/ .el-collapse {
	border: none;
}
/deep/ .el-collapse-item__wrap {
	border: none;
}
/deep/ .el-pagination {
	text-align: right;
	margin: 20px 0;
}
</style>